<template>
	<div>
		<el-row class="grid-content bg-purple-dark" >
		  <el-col :span="1">
			   <span class="el-icon-search" style="margin-top: 15px;"></span>
		  </el-col>
		  <el-col :span="2" style="margin-top: 10px;">
			  筛选查询
		  </el-col>
		  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;margin-left: 10px;">
			  <el-button type="info" size="medium" @click="addnewuser()">新增成员</el-button>
		  </el-col>
		  <el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;margin-left: 20px;">
		  	  <el-button type="info" size="medium" @click="changeuser()">修改成员</el-button>
		  </el-col>
		</el-row>
		
		<el-dialog title="新增成员" :visible.sync="isaddnewuser" width="40%">
		  <el-form :model="newuser" :rules="adduser">
		    <el-form-item label="项目员工：" prop="users">
				<el-col :span="18">
					<el-col :span="18">
						<el-checkbox-group v-model="newuser.users" >
							<div v-for="sta in allusers">
								<el-col :span="8" ><el-checkbox :label="sta.uname" :value="sta.uid"></el-checkbox></el-col>
							</div>
						</el-checkbox-group>
					</el-col>
				</el-col>
		    </el-form-item>
		    <el-form-item label="项目角色：" prop="roles">
				<el-col :span="24">
					<el-radio-group v-model="newuser.roles">
						<el-radio  v-for="(pro,index) in proles" :key="index" :value="pro.projectRoleId" size="medium" :label="pro.projectRoleName">
						</el-radio>
					  </el-radio-group>
				</el-col>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savemanager()">保 存</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog title="修改成员" :visible.sync="ischangeuserrole" width="40%">
		  <el-form :model="nowuserrole" :rules="changenowuser">
		    <el-form-item label="项目员工：" prop="users">
				<el-col :span="18">
					<el-col :span="18">
						<el-checkbox-group v-model="nowuserrole.users" >
							<div v-for="sta in user">
								<el-col :span="8" ><el-checkbox :label="sta.uname" :value="sta.uid"></el-checkbox></el-col>
							</div>
						</el-checkbox-group>
					</el-col>
				</el-col>
		    </el-form-item>
		    <el-form-item label="项目角色：" prop="roles">
				<el-col :span="24">
					<el-radio-group v-model="nowuserrole.roles">
						<el-radio  v-for="(pro,index) in proles" :key="index" :value="pro.projectRoleId" size="medium" :label="pro.projectRoleName">
						</el-radio>
					  </el-radio-group>
				</el-col>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savechange()">保 存</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog
		  title="移除"
		  :visible.sync="removerole"
		  width="30%">
		  <span>移除成功</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="sureremove()">确 定</el-button>
		  </span>
		</el-dialog>
		
		<el-table
		    ref="multipleTable"
		    :data="users.reconds"
		    tooltip-effect="dark"
		    style="width: 100%">
		    <el-table-column
		      prop="uname"
		      label="姓名"
		      width="300"
			  align="center">
		    </el-table-column>
			<el-table-column
			  prop="projectRoleName"
			  label="角色"
			  width="300"
			  align="center">
			</el-table-column>
			<el-table-column
			      fixed="right"
			      label="操作"
				  align="center"
				  show-overflow-tooltip>
			      <template slot-scope="scope">
			        <el-button type="text" size="small" @click="removeuser(scope.row)">移除</el-button>
			      </template>
			</el-table-column>
		  </el-table>
		
		<el-pagination
		   @size-change="handleSizeChange"
		   @current-change="handleCurrentChange"
		   :current-page="users.pagenum"
		   :page-sizes="[1, 2, 3, 4]"
		   :page-size="users.pagesize"
		   layout="total, sizes, prev, pager, next, jumper"
		   :total="users.totals">
		</el-pagination>
		
	</div>
</template>

<script>
	export default{
		name:'UserRolemanager',
		data(){
			return{
				pid:'',
				users:{
					pagenum: 0,
					pagesize: 0,
					reconds: [],
					totals: 0
				},
				isaddnewuser:false,
				newuser:{
					users:[],
					roles:[]
				},
				user:[],
				proles:[],
				allusers:[],
				nowuser:{},
				ischangeuserrole:false,
				nowuserrole:{
					users:[],
					roles:[]
				},
				removerole:false,
				adduser:{
					users:[
						{ type: 'array', required: true, message: '至少选择一个员工', trigger: 'change' }
					],
					roles:[
						 { required: true, message: '请选择项目角色', trigger: 'change' }
					]
				},
				changenowuser:{
					users:[
						{ type: 'array', required: true, message: '至少选择一个员工', trigger: 'change' }
					],
					roles:[
						 { required: true, message: '请选择项目角色', trigger: 'change' }
					]
				}
			}
		},
		methods:{
			handleSizeChange(val) {
			  console.log(`每页 ${val} 条`);
			  this.getuserBypid(this.users.pagenum, val)
			},
			handleCurrentChange(val) {
			  console.log(`当前页: ${val}`);
			  this.getuserBypid(val, this.users.pagesize)
			},
			addnewuser(){
				this.isaddnewuser=true
				this.getAlluser()
			},
			getAllroles(){
				this.$axios.post("projectRole/getrolesBypid").then(resp=>{
					if(200 == resp.data.code){
						this.proles = resp.data.data
					}
				})
			},
			getuserBypid(num,size){
				if(num > 0 && size > 0){
					let p  = {
						pid:this.pid,
						pagenum:num,
						pagesize:size
					}
					this.$axios.post("user/getuserBypid",p).then(resp=>{
						console.log(resp)
						if(200 == resp.data.code){
							this.users.pagenum = resp.data.data.current
							this.users.pagesize = resp.data.data.size
							this.users.totals = resp.data.data.total
							this.users.reconds = resp.data.data.records
						}
					})
				}
			},
			savemanager(){
				if(this.newuser.roles != '' && this.newuser.users.length > 0){
					let userroles = {
						roleid:-1,
						userids:[],
						projectid:this.pid
					}
					var s = 0;
					for(var i = 0;i < this.proles.length; i++){
						if(this.newuser.roles == this.proles[i].projectRoleName){
							userroles.roleid = this.proles[i].projectRoleId
						}
					}
					for(var j = 0;j < this.allusers.length; j++){
						for(var z = 0;z < this.newuser.users.length;z++){
							if(this.newuser.users[z] == this.allusers[j].uname){
								userroles.userids[s] = this.allusers[j].uid
								s++
							}
						}
					}
					console.log(userroles)
					this.$axios.post("user/giveuserrole",userroles).then(resp=>{
						if(200 == resp.data.code){
							alert("新增成功")
							this.isaddnewuser=false
							this.newuser.roles=[]
							this.newuser.users=[]
							this.getuserBypid(this.users.pagenum,this.users.pagesize)
						}else{
							alert(resp.data.message)
						}
					})
				}
			},
			changeuser(){
				this.ischangeuserrole=true
				this.getuserBypid(this.users.pagenum,this.users.pagesize)
				this.getHasRoleUser()
			},
			getHasRoleUser(){
				let p  = {
					pid:this.pid
				}
				this.$axios.post("user/getHasroleUser",p).then(resp=>{
					console.log(resp)
					if(200 == resp.data.code){
						this.user = resp.data.data
					}
				})
			},
			savechange(){
				if(this.nowuserrole.roles != '' && this.nowuserrole.users.length > 0){
					let userroles = {
						roleid:-1,
						userids:[],
						projectid:this.pid
					}
					var s = 0;
					for(var i = 0;i < this.proles.length; i++){
						if(this.nowuserrole.roles == this.proles[i].projectRoleName){
							userroles.roleid = this.proles[i].projectRoleId
						}
					}
					for(var j = 0;j < this.user.length; j++){
						for(var z = 0;z < this.nowuserrole.users.length;z++){
							if(this.nowuserrole.users[z] == this.user[j].uname){
								userroles.userids[s] = this.user[j].uid
								s++
							}
						}
					}
					this.$axios.post("user/changeuserrole",userroles).then(resp=>{
						if(200 == resp.data.code){
							alert("修改成功")
							this.ischangeuserrole=false
							this.nowuserrole.roles=[]
							this.nowuserrole.users=[]
							this.getuserBypid(this.users.pagenum,this.users.pagesize)
						}else{
							alert(resp.data.message)
						}
					})
				}
			},
			removeuser(s){
				this.$axios.post("user/removeuserrole",s).then(resp=>{
					if(200 == resp.data.code){
						this.removerole=true
					}
				})
			},
			sureremove(){
				this.removerole=false
				this.nowuserrole.roles=[]
				this.nowuserrole.users=[]
				this.getuserBypid(this.users.pagenum,this.users.pagesize)
			},
			getAlluser(){
				let proid = {
					pid:this.pid,
					uid:this.nowuser.uid
				}
				this.$axios.post("user/getallusers",proid).then(resp=>{
					if(200 == resp.data.code){
						this.allusers = resp.data.data
					}
				})
			}
		},
		created() {
			this.pid = JSON.parse(sessionStorage.getItem("nowproject"))
			this.nowuser = JSON.parse(sessionStorage.getItem("user"))
			this.getAlluser()
			this.getAllroles()
			this.getuserBypid(1,2)
		}
	} 
</script>

<style>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99aabf85;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
</style>
